<template>
	<view class="page-box">
		
		<view v-if='!isOther'>
			<view class="tab-box">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)">
					{{item.label}}
				</view>
				<view class="tab-line" :style="[tabLineStyle]"></view>
			</view>
			<view class="page-con" v-if="this.num == 2">
				<waybill v-show="tabIndex==0" :tabIndex="tabIndex"></waybill>
				
				<!-- <follower v-show="tabIndex==2" :tabIndex="tabIndex"></follower> -->
				<essential v-if="tabIndex==1" :tabIndex="tabIndex"></essential>
			</view>
			<view class="page-con" v-if="this.num == 1">
				<waybill v-show="tabIndex==0" :tabIndex="tabIndex"></waybill>
				
				<follower v-show="tabIndex==1" :tabIndex="tabIndex"></follower>
				<essential v-if="tabIndex==2" :tabIndex="tabIndex"></essential>
			</view>
		</view>
		<view class="page-con" v-if='isOther'>
			<waybill :tabIndex="tabIndex"></waybill>
		</view>
	</view>

</template>

<script>
	import waybill from "./waybill.vue"
	import essential from "./essential.vue"
	
	import follower from "./follower.vue"
	export default {
		components: {
			waybill,
			essential,
			follower
		},
		data() {
			return {
				num:1,
				tabIndex: 0,
				tabList: [],
				tabList1:[{
					label: '运单详情',
					component: "waybill",
				}, 
				{
					label: '运单附页',
					component: "waybill",
				}, 
				{
					label: '基本信息',
					component: "waybill",
				}],
				tabList2:[{
					label: '运单详情',
					component: "waybill",
				}, 
				{
					label: '基本信息',
					component: "waybill",
				}],
				dataList: {},
				isOther: false
			}
		},
		computed: {
			// 计算tabline的位置和宽度
			tabLineStyle() {
				if(this.num == 1){
					let width = 80 / this.tabList.length;
					return {
						width: width + '%',
						left: 34 * this.tabIndex + '%',
					}
				}else{
				let width = 80 / this.tabList.length;
				return {
					width: width + '%',
					left: 50 * this.tabIndex + '%',
				}	
				}
				
			}
		},
		methods: {
			// tab切换
			tabClick(index) {
				console.log(index,88)
				this.tabIndex = index
			},
		},

		mounted() {
			// this.tabList =this.tabList1
			// exIntegrity
			let list = this.$store.state.roadCheckInfo
			if(list.exIntegrity.length>0){
				this.tabList =this.tabList1
				this.num = 1
			}else{
				this.num = 2
				this.tabList =this.tabList2
			}
			if (this.$store.state.roadCheckInfo) {
				if (this.$store.state.roadCheckInfo.vehCode.slice(0, 1) !== '鄂' && this.$store.state.roadCheckInfo.billNo
					.slice(0, 2) !== '42') {
					this.isOther = true
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		height: 100%;
		
		display: flex;
		flex-direction: column;
        background: url(/static/img/ljlc/top.png) no-repeat;
					background-size: 100% 29%;
					background-color: #f8f8f8;
					
		.tab-box {
			display: flex;
			position: relative;
			z-index: 9999;
            // background: #1590EF;
            color: #fff;
			.tab-item {
				flex: 1;
				font-size: 32rpx;
				line-height: 2.6em;
				text-align: center;

				&.cur {
					color: #5881dc;
				}
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				height: 2px;
				// background: #5881dc;
				background: #C9E7FF;
				 color: #fff;
				transition: left 0.4s;
				    // margin: 0 20px;
					margin-left: 10px;
			}
		}

		.page-con {
			flex: 1;
			position: relative;
			padding: 0 15px;
			// background: #f8f8f8;
			box-sizing: border-box;
		}
	}
</style>